<!-- 可以包含回复的 -->
<!-- 展示评论的一个组件 -->
<template>
	<view class="comment-item">
		
		
		<comment-item :data="data.commentItem"></comment-item>

		
		<!-- 回复部分 -->
		<view class="comment-item__reply" @click="onClickShowPopup" v-if="data.replyItems">
			<view class="comment-item__reply-item">
				<text class="comment-item__reply-name">{{ data.replyItems[0].name }}：</text>
				<text>{{ data.replyItems[0].content }}</text>
			</view>
			
			<view class="comment-item__reply-count flex" v-if="data.replyItems.length>1">
				<text>共{{ data.replyItems.length }}条回复</text>
				<image class="comment-item__reply-icon" src="/static/images/rightArrow.png" mode="aspectFill"></image>
			</view>
		</view>
		
		<!-- 回复详情 -->
		<van-popup :show="showReplyDetails" position="bottom">
			<view class="forum-detail__reply">
				<view class="forum-detail__reply-header flex">
					<text>评论详情</text>
					<image class="forum-detail__reply-cancel" src="/static/images/cancel.png" mode="aspectFill" @click="onClickHidePopup"></image>
				</view>
				
				<view class="forum-detail__reply-content">
					<comment-item v-for="(item, index) in data.replyItems" :key="item.id" :data="item">
						<template #line v-if="index !== data.replyItems.length - 1">
							<view class="comment-item__line"></view>
						</template>
					</comment-item>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script setup>
	import { nextTick, onMounted, ref, useAttrs } from 'vue';
	import commentItem from '../commentItem/commentItem.vue'
	// import vanPopup from '@/wxcomponents/vant/popup/index'
	// 论坛部分
	// const attrs = useAttrs()
	// const emit = defineEmits(['replyDetail'])
	// 论坛点赞图标是什么状态：激活还是未激活
	const props = defineProps({
		data: {
			type: Object,
			default: () => ({})
		}
	})
	const likeIconActive = ref(false);
	
	const disLikeIconActive = ref(false)
	
	const replyItems = ref([1,2])
	
	const showReplyDetails = ref(false);
	
	function onClickShowPopup(){
		console.log('查看回复详情');
		showReplyDetails.value = true;
	}
	
	function onClickHidePopup(){
		showReplyDetails.value = false;
	}
	
	function toggleLikeIcon(){
		if(likeIconActive.value){
			likeIconActive.value = false;
		}else{
			likeIconActive.value = true;
		}
	}
	
	function toggleDisLikeIcon(){
		if(disLikeIconActive.value){
			disLikeIconActive.value = false;
		}else{
			disLikeIconActive.value = true;
		}
	}
	
	// function onClickReply(){
	// 	emit('replyDetail')
	// }
	// onMounted(()=>{
	// 	nextTick(()=>{
	// 		if(attrs){
	// 			console.log(attrs.value);
	// 		}
	// 	})
	// })
</script>

<style lang="scss" scoped>
.comment-item{
	margin: 0 auto;
	margin-bottom: 30rpx;
	&__user{
		&-info{
			margin-top: 20rpx;
			margin-bottom: 18rpx;
		}
		
		&-avatar{
			width: 50rpx;
			height: 50rpx;
			margin-right: 18rpx;
		}
		
		&-name{
			font-size: 24rpx;
		}
		
		&-gender{
			width: 18rpx;
			height: 18rpx;
			margin-left: 5rpx;
		}
		
		&-post-time{
			font-size: 18rpx;
			color: #333333;
		}
	}
	
	&__content{
		width: 586rpx;
		margin-left: 68rpx;
		margin-bottom: 12rpx;
		font-size: 24rpx;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		overflow: hidden;
		-webkit-box-orient: vertical;
	}
	
	// 互动部分
	&__interaction{
		margin-left: 68rpx;
		margin-bottom: 16rpx;
		&-like{
			margin-right: 15rpx;
			align-items: center;
		}
		
		&-dislike{
			margin-right: 15rpx;
			align-items: center;
		}
		
		&-reply{
			margin-right: 9rpx;
			align-items: center;
		}
		
		&-icon{
			width: 30rpx;
			height: 30rpx;
		}
	}
	
	// 回复部分
	&__reply{
		width: 586rpx;
		box-sizing: border-box;
		padding: 12rpx 0;
		padding-left: 18rpx;
		margin-left: 68rpx;
		background-color: #f2f2f2;
		border-radius: 5rpx;
		&-item{
			font-size: 24rpx;
			color: #333333;
			margin-bottom: 12rpx;
		}
		
		&-name{
			color: #608ec5;
		}
		
		&-count{
			font-size: 18rpx;
			color: #797979;
		}
		
		&-icon{
			width: 12rpx;
			height: 12rpx;
		}
	}
	
	// 分割线
	&__line{
		width: 690rpx;
		height: 2rpx;
		background-color: #d7d7d7;
		margin: 0 auto;
	}
}

.forum-detail{
	&__reply{
		// width: ;
		&-header{
			width: 690rpx;
			box-sizing: border-box;
			padding: 20rpx;
			// padding-bottom: 18rpx;
			border-bottom: 2rpx solid #d7d7d7;
			justify-content: space-between;
			margin: 0 auto;
		}
		&-cancel{
			width: 30rpx;
			height: 30rpx;
		}
		
		&-content{
			width: 690rpx;
			margin: 0 auto;
		}
		
		&-item{
			// border-bottom: 10rpx solid #d7d7d7 !important;
			// background-color: red !important;
		}
	}
}
</style>
